// subpackage/pages/rankTopDetail/index.js
Page({
  data: {
    backIcon: {
      icon: 'https://bojemoss.oss-cn-shanghai.aliyuncs.com/bojem_home/home2/new_goods/navback.png'
    },
    titleIcon: {
      icon: 'https://bojemoss.oss-cn-shanghai.aliyuncs.com/bojem_home/home2/new_goods/bojem_home.png'
    },
    rankTopData: null,
    activeIndex: 0,
    navbar: null,
    isPosTitleBar: false,
    titlebar: null,
    // 页面卷去的高度
    pageScrollTop: 0,
    // mode初始位置数据
    initPosModeRect: null,
    // 是否是选中定位
    isCheckedPos: false,
    subEvents: [],
    // 防抖函数
    debounce: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  onShow() {
    this.setData({
      debounce: this.initInterval()
    });
  },
  onReady() {
    this.titlebarNotify();
  },
  onPageScroll({scrollTop}){
    this.setData({ pageScrollTop: scrollTop });
    //定位标题栏
    this.posTitlebar(scrollTop);
    this.data.debounce(() => this.onPageScrollEnd(scrollTop))
  },
  onPageScrollEnd(scrollTop) {
    // 是选中定位，则不执行，定位当前选中项
    if(this.data.isCheckedPos){ 
      return this.setData({ isCheckedPos: false }) 
    }
    // 定位当前选中项
    this.posActiveTitleItem(scrollTop);
  },
  /**
   * 榜单数据事件
   */
  rankTopData(e) {
    this.setData({
      rankTopData: e.detail || []
    })
  },
  /**
   * 榜单列表渲染完成事件
   */
  rankTopRenderComplete(){
    // 设置每个模块的初始位置rect数据
    this.setInitPosModeRect();
  },
  /**
   * 导航栏消息通知事件
   */
  navbarNotify({ detail: navbar }){
    this.setData({navbar})
  },
  query(selector, component = this){
    return wx.createSelectorQuery().in(component).selectAll(selector);
  },
  /**
   * 标题栏消息通知
   */
  titlebarNotify(){
    const query = this.query('.title-bar');
    query.boundingClientRect().exec(([[node]])=> {
      this.setData({
        titlebar: node
      })
    })
  },
  setInitPosModeRect(){
    this.modeRect(initPosModeRect => {
      this.setData({ initPosModeRect })
    });
  },
  /**
   * 定位标题栏
   */
  posTitlebar(scrollTop) {
    // 是否吸顶
    const isAdsorTop = scrollTop >= this.data.titlebar.top - this.data.navbar.navbarHeight;
    if(this.data.isPosTitleBar == isAdsorTop){return}
    this.setData({
      isPosTitleBar: isAdsorTop,
      'backIcon.icon': isAdsorTop ? 'https://ossbaojie.bojem.com/bj/strollHome/back.png' : 'https://bojemoss.oss-cn-shanghai.aliyuncs.com/bojem_home/home2/new_goods/navback.png',
      'titleIcon.icon': isAdsorTop ? '' : 'https://bojemoss.oss-cn-shanghai.aliyuncs.com/bojem_home/home2/new_goods/bojem_home.png'
    });
  },
  /**
   * 每个模块rect数据
   */
  modeRect(selector, callback) {
    typeof selector == 'function' && ( callback = selector, selector = '')
    selector = selector || '#rank-top';
    const query = this.query('.rank-top', this.selectComponent(selector));
    query.boundingClientRect().exec(async ([nodes])=> typeof callback == 'function' && callback(nodes))
  },
  /**
   * 锚点定位
   */
  anchorPos(e){
    this.setData({ isCheckedPos: true });
    const { index: activeIndex } = e.currentTarget.dataset;
    this.setActiveTitleItem(activeIndex);
    this.modeRect(nodes => {
      const node = nodes[activeIndex];
      wx.pageScrollTo({
        scrollTop: node.top - (this.data.navbar.navbarHeight + this.data.titlebar.height) + (activeIndex ? this.data.pageScrollTop : 0)
      })
    })
  },
  /**
   * 设置选中的title-item
  */
  setActiveTitleItem(activeIndex){
    this.setData({
      activeIndex
    });
  },
  // 定位当前选中的标题栏的active-item
  posActiveTitleItem(scrollTop) {
    this.data.initPosModeRect.forEach((rect, i)=> {
      const posHeight = this.data.titlebar.height + this.data.navbar.navbarHeight;
      if(scrollTop < posHeight) { 
        return this.setActiveTitleItem(0) 
      }
      if(scrollTop >= rect.top - posHeight) {
        this.setActiveTitleItem(i)
      }
    });
  },
  // 初始化定时器
  initInterval() {
    let timer;
    return function(callback) {
      //清空上一次定时器
      timer && clearTimeout(timer);
      timer = setTimeout(() => typeof callback == 'function' && callback() ,300);
    };
  }
})